<template>
  <view class="goods-detail pages">
    <pagehead :style="'height:calc(88rpx + ' + statusBarHeight + ')px;padding-top:'+ statusBarHeight +'px'">
      物料详情
      </pagehead>
    <view class="tab" :style="'top:calc(88rpx + ' + statusBarHeight + 'px);'">
      <view v-for="(item,index) in tab" :Key="index" :class="[currentIndex == (index+1) ? 'active' : '', 'item',width]" 
      @tap="changeTab(index+1)" :style="'width:'+width+'%'">{{item}}</view>
    </view>
    <view v-show="currentIndex==1" :style="'margin-top:calc(88rpx);'">
    <!-- 轮播图 -->
    <uni-swiper-dot :info="info" :current="current" mode="false">
      <view class="swiperBox">
        <view class="swiperBox-wrapper">
          <swiper :indicator-dots="false" :autoplay="autoplay" :interval="2500" :duration="1000" :circular="true"
            class="swiperBox-swiper" @change="changeSwiper">
            <swiper-item class="swiperBox-swiper__item" v-for="(item, index) in info" :key="index">
              <init-image :src="imgShow(item)" mode="widthFix" style="width: 100%;"/>
              <!-- <image :src="imgShow(item)" mode="widthFix" style="width: 100%;"></image> -->
            </swiper-item>
          </swiper>
          <view class="editorbox" v-if="info.length > 0">
            <view class="editorbox-num">{{ current + 1 }}</view>
            <view class="editorbox-num">/</view>
            <view class="editorbox-num">{{ info.length }}</view>
          </view>
        </view>
      </view>
    </uni-swiper-dot>
    <view class="content">
      <view class="price"><text class="unit">￥</text>{{ goodsDetai.goods_price }}</view>
      <view class="name">{{ goodsDetai.goods_name }}</view>
      <!-- <view class="des">{{ goodsDetai.des }}</view> -->
      <view class="rate"><text>{{ goodsDetai.label }}</text></view>
    </view>
  </view>
    <view class="detail" id="anchor-1" v-show="currentIndex==1" :style="'margin-top:calc(88rpx);'">
      <view class="title">商品说明</view>
      <view class="detail-content">
        <init-image :src="imgShow(item)" v-for="(item,index) in info1" :key="index"
        class="img" mode="widthFix" style="width: 100%;"/>
      </view>
    </view>
    <view class="detail" id="anchor-2" v-show="currentIndex==2" :style="'margin-top:calc(88rpx);'">
      <view class="title">奖励说明</view>
      <view class="detail-content">
        <init-image :src="imgShow(item)" v-for="(item,index) in info2" :key="index"
        class="img" mode="widthFix" style="width: 100%;"/>
      </view>
    </view>
    <view class="detail" id="anchor-3" v-show="currentIndex==3" :style="'margin-top:calc(88rpx);'">
      <view class="title">视频教程</view>
      <view class="detail-content" v-if="goodsDetai.video_describe">
        <video class="myVideo" :src="goodsDetai.video_describe" controls></video>
      </view>
    </view>
    <view class="bottom">
      <!-- #ifdef MP-WEIXIN -->
      <button class="btn" open-type="share">分享</button>
      <!-- #endif -->
      <!-- #ifdef APP-PLUS || H5-->
      <button class="btn" @tap.stop="shareWeinx()">分享</button>
      <!-- #endif -->
      <view class="btn submit" v-if="shopType=='01'" @tap.stop="submit()">立即领取</view>
      <view class="btn submit" v-if="shopType=='02'" @tap.stop="submit()">兑换</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      IMAGE_STATIC: this.$url.assetsPath,
      currentIndex: 1,
      current: 0,
      info: [],
      info1:[],
      info2:[],
      goodsDetai: {
        // id: 1,
        // price: 100,
        // name: '聚合码付（立牌）聚合码付（立牌）',
        // des: '聚合码付（立牌）聚合码付（立牌）',
        // rate: 0.1,
      },
      shopType:'01',  // 01-线上物料 02-积分物料
      qiniu_domain:	uni.getStorageSync('qiniu_domain'),
      autoplay:true,
      tab:['商品说明','奖励说明','视频教程'],
      width:'33.3',
      statusBarHeight:0,
      usermsg:uni.getStorageSync('usermsg') ? uni.getStorageSync('usermsg') : {}
    };
  },
  onLoad(options) {
    if(options){
      this.id = options.value1
      this.shopType = options.value2
      this.getDetail()
    }
    const that = this
    //获取手机型号
    uni.getSystemInfo({
      success: function (res) {
      that.statusBarHeight = res.statusBarHeight//状态栏高度
      that.platform = res.platform//机型
      console.log('platform',that.platform ,',statusBarHeight',that.statusBarHeight)

      }
    });

  },
  onShow() {
    this.autoplay = true
  },
  onUnload() {
    // 当离开页面时停止轮播图
    this.stopSwiperAutoPlay();
  },
  onHide() {
    // 当页面隐藏时停止轮播图
    this.stopSwiperAutoPlay();
  },
  methods: {
    // 立即领取
    submit() {
      const that = this
      if(!this.usermsg.real_name){
      uni.showModal({
        title: '温馨提示',
        content: '为了方便您使用其他功能，请您先实名',
        success: function (res) {
          if (res.cancel) {
              console.log('用户点击取消');
              // 用户点击确定，继续执行跳转
              that.$tools.jump('/pages/goods/confirmOrder',that.shopType,JSON.stringify(that.goodsDetai))
              return true;
            }
            if (res.confirm) {
              console.log('用户点击确定');
              setTimeout(()=>{
                that.$tools.jump('/pages/setup/editUserInfo')
              },500)
          }
        }
      })
    }else{
      this.$tools.jump('/pages/goods/confirmOrder',this.shopType,JSON.stringify(this.goodsDetai))
    }
    },
    // 获取详情
    getDetail(){
      let that = this;
      const data = {
        product_id: this.id
      }
      console.log('data',data)
      that.$Ajax('/api/product/getSysProductDetail',data,
      res => {
        if(res.success){
          this.goodsDetai = res.data.sysProduct;
          this.info = this.goodsDetai.goods_navigation?(this.goodsDetai.goods_navigation).split(','):[]
          this.info1 = this.goodsDetai.goods_describe?(this.goodsDetai.goods_describe).split(','):[]
          this.info2 = this.goodsDetai.reward_describe?(this.goodsDetai.reward_describe).split(','):[]
          this.goodsDetai.video_describe= this.goodsDetai.video_describe?this.qiniu_domain+this.goodsDetai.video_describe:''
          if(this.info2.length>0 || this.goodsDetai.video_describe){
            if(this.info2.length>0){
              this.tab=['商品说明','奖励说明']
            }
            if(this.goodsDetai.video_describe){
              this.tab=['商品说明','视频教程']
            }
            this.width = '50'
            if(this.info2.length>0&&this.goodsDetai.video_describe){
              this.tab=['商品说明','奖励说明','视频教程']
              this.width = '33.3'
            }
          }else{
            this.tab=['商品说明']
            this.width = '100'
          }
        }
      }, err => {
        console.log(err);
      })
		},
    // 切换
    changeTab(index) {
      if (this.currentIndex != index) {
        this.currentIndex = index
        // this.move(index)
      }
    },
    // 喵点定位
    move(index) {
      let height=0
      uni.createSelectorQuery().select('#anchor-2').boundingClientRect((res) => {//定位到你要的class的位置
        height = res.height
        console.log(index,res.height)
      }).exec()
      uni.createSelectorQuery().select('#anchor-' + index).boundingClientRect((res) => {//定位到你要的class的位置
        console.log(res)
        const top = index==1?res.top:index==2?res.top + 44:height+res.top
        console.log('top',top)
        uni.pageScrollTo({
          scrollTop:top ,
          duration: 300
        });
      }).exec()
    },
    changeSwiper(e) {
      // console.log(e)
      this.current = e.detail.current;
    },
    stopSwiperAutoPlay() {
      // 停止轮播图自动播放
      this.autoplay = false
    },
    // H5或app 端分享
			shareWeinx(){
        let path = 'pages/goods/goodsDetails'
        //地址动态传参
        const obj = {
            value1:this.id,
            value2:this.shopType,
          }  
          let queryString = Object.keys(obj).map(key => `${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`).join('&') // 把对象转换成 a=1&b=2&c=3&d=4 的字符串格式
          console.log("queryString:",queryString)
          const query = encodeURIComponent(queryString)  // 对其进行转码
          console.log("query:",query)
				// #ifdef APP-PLUS
				// 分享图文
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					href: this.$url.urlPath+'/#/'+path+'?'+query,
					title: "启航掌柜",
					summary: "启航掌柜自主创新网络诚信体系，秉承“公平公正、诚信、双赢”的理念，利用自身开发优势，构架支付规范模型。",
					imageUrl:  this.$url.assetsPath+'/images/logo.png',
					success: function (res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function (err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
				// 分享到小程序
				// uni.share({
				// provider: 'weixin',
				// scene: "WXSceneSession", //分享类型（聊天，朋友圈）
				// type: 5,//类型 
				// title: "启航掌柜",
				// imageUrl: this.$url.assetsPath+'/images/logo.png',//不能大于20kb
				// miniProgram: {
				// 	id: "gh_32ee067a8084",//小程序原始ID
				// 	path: "pagesMain/index/index",//小程序页面路径，传参也是?拼接
				// 	webUrl: this.$url.urlPath,//地址
				// 	type: 2 //微信小程序版本类型，可取值： 0-正式版； 1-测试版； 2-体验版。 默认值为0。
				// },
				// success: res => {
				// 	console.log(res);
				// },
				// fail: function(err) {
				// 		console.log(err);
				// }
				// });
				// #endif
				// #ifdef H5
				// const url = this.$url.urlPath
					// location.href = url;
          let ENV_VERSION = ''
          location.href = `weixin://dl/business/?appid=wx8680e48d44da9d29&path=${path}&query=${query}&env_version=${ENV_VERSION}`
				// #endif
			},
  },
};
</script>

<style lang="scss" scoped>
.goods-detail {
  .header_bar{
  }
  padding-bottom: 200rpx;

  .tab {
    @include flexBetween;
    background: #FFFFFF;
    box-shadow: inset 0rpx 1rpx 0rpx 0rpx #E7E7E7;
    width: 100%;
    position: fixed;
    top: 88rpx;
    left: 0;
    z-index: 999;
    /* #ifdef MP-WEIXIN || APP-PLUS */
    // top: calc(88rpx + var(--status-bar-height));
    /* #endif */
    .item {
      width: 50%;
      text-align: center;
      height: 96rpx;
      line-height: 96rpx;
      font-size: 32rpx;
      color: rgba(0, 0, 0, 0.6);
    }

    .active {
      font-weight: 600;
      font-size: 32rpx;
      color: #333333;
      position: relative;
    }

    .active::before {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-40rpx);
      content: '';
      width: 80rpx;
      height: 8rpx;
      background: #AD2926;
      border-radius: 70rpx;
    }
  }
  .uni-swiper__warp{
    // margin-top: calc(88rpx );
  }
  .swiperBox {
    width: 100%;
    height: 750rpx;
    position: relative;
    z-index: 8;
    margin: 0;
    @include flexCenter;

    &-wrapper {
      width: 100%;
    }

    &-swiper {
      width: 100%;
      height: 750rpx;

      &__item {
        width: 100%;
        height: 750rpx;
        overflow: hidden;
        padding: 0;
        border-radius: 0;
        @include flexCenterColumn;

        image {
          width: 100%;
          height: 100%;
          border-radius: 0;
        }
      }
    }
  }

  .editorbox {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 40rpx;
    position: absolute;
    right: 22rpx;
    bottom: 24rpx;
    padding: 6rpx 18rpx;
    @include flexCenter;

    &-num {
      font-size: 24rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
      margin: 0 3rpx;
    }
  }

  .content {
    background: #fff;
    padding: 32rpx;

    .name {
      font-weight: 500;
      font-size: 32rpx;
      color: #333333;
    }

    .des {
      margin-top: 12rpx;
      font-size: 28rpx;
      color: rgba(0, 0, 0, 0.6);
      ;
    }

    .rate {
      margin-top: 20rpx;
      padding-top: 20rpx;
      border-top: 1px solid #EEEEEE;

      text {
        font-size: 20rpx;
        color: #AD2926;

      }
    }

    .price {
      margin-top: 12rpx;
      font-size: 34rpx;
      font-weight: bold;
      color: #AD2926;
      height: 48rpx;

      .unit {
        font-size: 24rpx;
      }
    }
  }

  .detail {
    margin-top: 20rpx;
    background: #fff;
    padding: 32rpx;

    .title {
      font-weight: 500;
      font-size: 32rpx;
      color: #333333;
      color: #333333;
      line-height: 40rpx;
    }

    &-content {
      margin-top: 20rpx;
      font-size: 24rpx;
      color: rgba(0, 0, 0, 0.6);
      line-height: 28rpx;
      .myVideo,/deep/ uni-video-bar,image,/deep/ img{
        width: 100%;
      }
    }
  }

  .bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    background: #fff;
    padding: 32rpx;
    box-sizing: border-box;
    @include flexBetween;

    .btn {
      width: 48.8%;
      text-align: center;
      height: 80rpx;
      line-height: 80rpx;
      border-radius: 86rpx;
      color: #AD2926;
      font-size: 30rpx;
      border: 2px solid #AD2926;
      background: none;
      box-sizing: content-box;
    }

    .submit {
      background: #AD2926;
      color: #fff;
    }
  }
}
</style>
